<template>
	<view>
		<!-- <u-navbar :is-back="false" :border-bottom="false" :custom-back="Allback" :background="navbackcolor"
			back-icon-color="rgba(255,255,255,0.9)" title="首页" title-color="#fff"></u-navbar> -->
			<u-navbar :is-back="false" title="">
				<view class="slot-wrap">
					<view class="top-avatar flexcenter" @click="movableareaShow = !movableareaShow">头像</view>
					<view class="top-title lineclamp1" @click="openScanCode">姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名</view>
				</view>
				<view slot="right">
					<image src="@/static/search.png" class="icon"></image>
					<image src="/static/add.png" class="icon" style="margin-right: 32rpx;margin-left: 40rpx;" @click="addOptionShow = !addOptionShow"></image>
				</view>
			</u-navbar>
			
			<!-- 自定义父级容器(水印) -->
			<!-- <view style="height: 500rpx;position: relative;">
			   <h-watermark :mobileShow="false" :appNameShow="false" titleColor="#BEBEBE" :titleLucency="0.4" position="absolute" title="自定义标题文字" :titleSize="12" rotate="-25"></h-watermark>
			</view> -->
			 <view style="width: 100%;float: right;display: flex;justify-content: flex-end;" v-if="addOptionShow">
			<view class="frame-add-block">
				<view class="flexalign" style="margin-bottom: 50rpx;" v-for="(item,index) in addOption" :key="index" @click="goPages(item,index)">
					<image :src="item.icon" style="width: 42rpx;height: 42rpx;"></image>
					<text style="margin-left: 16rpx;font-weight: 400;font-size: 32rpx;color: #333333;">{{item.text}}</text>
				</view>
			</view>
			</view>
			<view>
				<view class="frame-inform flexal" @click="go('/pages3/device/device')">
					<image src="/static/index/computer.png" style="width: 27rpx;height: 25rpx;margin-left: 35rpx;"></image>
					<text class="text">Windows 已登录</text>
				</view> 
				<scroll-view scroll-y="true" :style="{'height': (clientHeight) + 'px'}">
					<view>
					<u-swipe-action :show="item.show" 
								v-for="(item, index) in list" :key="item.id" 
								:index="index" 
								@click="click" @open="open"
								:options="options"
							>
								<view class="frame-item" @click="goMessage(item)">
									<view style="display: flex;">
									<image mode="aspectFill" class="item-avatar" :src="item.images" />
									<view class="message-tips flexcen">99</view>
									</view>
									<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
									<view class="title-wrap">
										<div style="margin-left: 24rpx;">
										<div style="display: flex;margin-top: 10rpx;">
											<view style="flex: 1;" class="flexal">
											<view class="title u-line-2 lineclamp1">{{ item.title }}</view>
											<image v-if="item.start" src="/static/index/start.png" style="width: 24rpx;height: 24rpx;margin-left: 15rpx;"></image>
											</view>
											<view class="frame-time">14:00</view>
											<view class="triangle" v-if="item.top" ></view>
										</div>
										<div style="display: flex;margin-top: 15rpx;">
											<view class="content u-line-2 lineclamp1" style="flex: 1;">{{ item.content }}</view>
											<image src="/static/index/shield.png" style="width: 22rpx;height: 27rpx;"></image>
										</div>
										</div>
									</view>
									
								</view>
					</u-swipe-action>
					</view>
					<!-- <view class="frame-item">
						
					</view> -->
				</scroll-view>
			</view>
		<!-- 电话提示滑动快 -->
		<movablearea1 :movaheight="movaheightAll" v-if="movableareaShow" @editMovaheightAll="editMovaheightAll" :movaTop="movaTopAll"></movablearea1>
		
		<u-tabbar v-model="tabs" :list="common_bottom" inactive-color="#858A99" active-color="#0052D9" :border-top="false" icon-size="56" height="120" bg-color="#fff"></u-tabbar>
	</view>
</template>

<script>
	import {
		setToken
	} from '@/common/auth.js'
	
	export default {
		data() {
			return {
				common_bottom: getApp().globalData.common_bottom,
				// type:0:单聊,1:群聊,2:审批,3:公告,4:文件传输助手,5:机器人，6:通知集成
				list: [
					{
						id: 1,
						title: '群组名称名称名称',
						images: 'https://cdn.uviewui.com/uview/album/1.jpg',
						content:'文字内容内容内容',
						show: false,
						top:true,
						type:0,
						start:0
					},
					{
						id: 2,
						title: '姓名',
						images: 'https://cdn.uviewui.com/uview/album/2.jpg',
						content:'文字内容内容内容',
						show: false,
						top:false,
						type:1,
						start:0
					},
					{
						id: 3,
						title: '姓名',
						images: 'https://cdn.uviewui.com/uview/album/3.jpg',
						content:'文字内容内容内容',
						show: false,
						top:false,
						type:1,
						start:1
					},
					{
						id: 4,
						title: '审批',
						images: '/static/index/examine.png',
						content:'文字内容内容内容',
						show: false,
						top:false,
						type:2,
						start:0
					},
					{
						id: 5,
						title: '公告',
						images: '/static/index/notice.png',
						content:'文字内容内容内容',
						show: false,
						top:false,
						type:3,
						start:0
					},
					{
						id: 6,
						title: '文件传输助手',
						images: '/static/index/aide.png',
						content:'文字内容内容内容',
						show: false,
						top:false,
						type:4,
						start:0
					},
					{
						id: 7,
						title: '机器人',
						images: '/static/index/robot.png',
						content:'文字内容内容内容',
						show: false,
						top:false,
						type:5,
						start:0
					},
					{
						id: 8,
						title: '消息集成',
						images: '/static/index/bell1.png',
						content:'文字内容内容内容',
						show: false,
						top:false,
						type:6,
						start:0
					}
				],
				show: false,
				options: [
					{
						text: '标为未读',
						icon:'http://www.wn-wh.cn/Upload/2024/0902/202409021659417965.png',
						style: {
							backgroundColor: '#2BA471',
							height:'100rpx'
						}
					},
					{
						text: '置顶',
						icon:'http://www.wn-wh.cn/Upload/2024/0902/202409021658468623.png',
						style: {
							backgroundColor: '#366EF4',
							height:'100rpx'
						}
					},
					{
						text: '删除',
						icon:'http://www.wn-wh.cn/Upload/2024/0902/202409021657511057.png',
						style: {
							backgroundColor: '#D54941',
							height:'100rpx'
						}
					}
				],
				
				addOption:[
					{
						text:'扫一扫',
						icon:'/static/index/de1393329716202cb890d52c62772f3.png'
					},{
						text:'创建群组',
						icon:'/static/index/088ae6e5e230f7f925f1c2cb9af2c3c.png'
					},{
						text:'创建文档',
						icon:'/static/index/10505cc0429f6525f1d688c79a278a0.png'
					},{
						text:'加入会议',
						icon:'/static/index/9f2d152c459212a7a0151b7dc2decab.png'
					},{
						text:'发起会议',
						icon:'/static/index/337a97de41976aaf7bf16f7c215de0d.png'
					},
				],
				addOptionShow:false,						//操作栏显示
			}
		},
		
		async onLoad() {
			
		},
		
		onReady() {
			console.log('clientHeight',this.clientHeight)
			// this.show = true
		},
		onShow() {
			
		},
		onHide() {
			console.log('我被执行了')
			// this.show = false
		},
		onPullDownRefresh() {
			
		},
		onReachBottom() {

		},
		methods: {
			close(){
				setToken('');
				// this.$popup.show({
				// 	title: '提交成功',
				// 	content: '请等待平台确认',
				// 	confirm: () => {
				// 		// #ifdef H5
				// 		this.$popup.hide()
				// 		// #endif
				// 	}
				// })
			},
			// 操作栏前往页面
			goPages(item,index){
				// console.log()
				if(index == 3){
					this.go('/pages6/metting/addMetting')
				}else if(index == 4){
					this.go('/pages6/metting/start')
				}else if(index == 1){
					this.go('/pages3/createGroup/createGroup')
				}else if(index == 0){
					this.openScanCode()
				}
			},
			
			
			// 点击用户列表
			click(index, index1) {
				if(index1 == 1) {
					this.list.splice(index, 1);
					this.$u.toast(`删除了第${index}个cell`);
				} else {
					this.list[index].show = false;
					this.$u.toast(`收藏成功`);
				}
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.list[index].show = true;
				this.list.map((val, idx) => {
					if(index != idx) this.list[idx].show = false;
				})
			},
			// 前往聊天界面
			goMessage(item){
				if(item.type == 0 || item.type == 1 || item.type == 4){
					this.go('/pages3/message/message')
				}else if(item.type == 2){
					this.go('/pages3/message/audit')
				}else if(item.type == 3){
					this.go('/pages3/message/affiche')
				}else if(item.type == 5){
					this.go('/pages3/message/robot')
				}else if(item.type == 6){
					this.go('/pages3/message/integration')
				}
			},
			// 扫一扫
			openScanCode(){
				// 允许从相机和相册扫码
				uni.scanCode({
					success: function (res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			}
				
		},

	}
</script>
<style>
	
</style>
<style scoped lang="less">
	
	.slot-wrap {
			display: flex;
			align-items: center;
			/* 如果您想让slot内容占满整个导航栏的宽度 */
			/* flex: 1; */
			/* 如果您想让slot内容与导航栏左右有空隙 */
			/* padding: 0 30rpx; */
			.top-avatar{
				margin-left: 32rpx;
				width: 70rpx;
				height: 70rpx;
				background: #D9E1FF;
				border-radius: 50%;
				font-weight: 500;
				font-size: 22rpx;
				color: #333333;
			}
			.top-title{
				flex: 1;
				width: 350rpx;
				font-weight: 500;
				font-size: 40rpx;
				margin-left: 20rpx;
				color: #333333;
			}
		}
		
		.frame-item {
				display: flex;
				margin-bottom: 44rpx;
				height: 100rpx;
				margin-left: 32rpx;
				margin-right: 32rpx;
				// padding: 20rpx;
				.item-avatar{
					width: 100rpx;
					height: 100rpx;
					background: #FFFFFF;
					border-radius: 50%;
				}
				.title {
					// flex: 1;
					// width: 450rpx;
					text-align: left;
					font-size: 32rpx;
					font-weight: 500;
					color: #333333;
				}
				.content{
					width: 450rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
				}
				.title-wrap{
					// width: 100%;
					width: 585rpx;
				}
				.message-tips{
					margin-left: -31rpx;
					z-index: 10;
					width: 32rpx;
					height: 32rpx;
					background: #F65160;
					border-radius: 50%;
					font-weight: 400;
					font-size: 20rpx;
					color: #FFFFFF;
				}
				.triangle {
						margin-right: -10rpx;
				        width: 0;
				        height: 0;
				        border-top: 13rpx solid #366EF4;
				        border-left: 13rpx solid transparent;
						z-index: 100;
				    }
				.frame-time{
						font-weight: 400;
						font-size: 24rpx;
						color: #9D9D9D;
				}
				
			}
			.frame-inform{
				margin-left: 32rpx;
				width: 686rpx;
				height: 58rpx;
				background: #F2F2F2;
				border-radius: 37rpx 37rpx 37rpx 37rpx;
				margin-bottom: 28rpx;
				margin-top: 10rpx;
				
				.text{
					margin-left: 30rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #7A7A7A;
				}
			}
			.frame-add-block{
				margin-right: 32rpx;
				position: fixed;
				width: 330rpx;
				// height: 498rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 3rpx 15rpx 1rpx rgba(0,0,0,0.16);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				z-index: 100;
				padding: 32rpx 24rpx 0rpx 24rpx;
			}
			// image {
			// 	width: 120rpx;
			// 	flex: 0 0 120rpx;
			// 	height: 120rpx;
			// 	margin-right: 20rpx;
			// 	border-radius: 12rpx;
			// }
			
			
		
		.icon{
			width: 40rpx;
			height: 40rpx;
		}
	
</style>